<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>新建报工</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; background: #f5f5f5; margin: 0; padding: 0; }
    .form-container { max-width: 600px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 6px;
                      box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    h2 { margin: 0 0 20px; font-size: 18px; }

    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 6px; font-weight: bold; font-size: 14px; }
    .form-group input, .form-group select {
      width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
    }

    .status-group { display: flex; gap: 15px; }
    .status-option { padding: 6px 12px; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; }
    .status-option.active { background: #00b96b; color: #fff; border-color: #00b96b; }

    .actions { display: flex; justify-content: flex-end; gap: 15px; margin-top: 20px; }
    .btn { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .btn.cancel { background: #f5f5f5; color: #333; }
    .btn.submit { background: #00b96b; color: #fff; }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>新建报工</h2>

    <div class="form-group">
      <label>工单编号</label>
      <input type="text" value="DS20250806001" readonly>
    </div>

    <div class="form-group">
      <label>产品编号</label>
      <input type="text" value="DS01" readonly>
    </div>

    <div class="form-group">
      <label>产品名称</label>
      <input type="text" value="DS鸡扒1" readonly>
    </div>

    <div class="form-group">
      <label>产品规格</label>
      <input type="text" value="200G" readonly>
    </div>

    <div class="form-group">
      <label>工序名称</label>
      <select>
        <option>原料发放</option>
        <option>解冻</option>
        <option selected>机器分切</option>
        <option>滚揉腌制</option>
        <option>内包装</option>
      </select>
    </div>

    <div class="form-group">
      <label>任务状态</label>
      <div class="status-group">
        <div class="status-option">未开始</div>
        <div class="status-option active">执行中</div>
        <div class="status-option">已结束</div>
      </div>
    </div>

    <div class="form-group">
      <label>生产人员</label>
      <select>
        <option selected>系统管理员</option>
        <option>张三</option>
        <option>李四</option>
      </select>
    </div>

    <div class="form-group">
      <label>良品数</label>
      <input type="number" value="8">
    </div>

    <div class="form-group">
      <label>报工单位</label>
      <select>
        <option>份</option>
        <option>件</option>
        <option>公斤</option>
      </select>
    </div>

    <div class="form-group">
      <label>不良品数</label>
      <input type="number" placeholder="请输入数量">
    </div>

    <div class="form-group">
      <label>不良品项</label>
      <select>
        <option>请选择</option>
        <option>破损</option>
        <option>重量不足</option>
        <option>外观不良</option>
      </select>
    </div>

    <div class="form-group">
      <label>报工时间</label>
      <input type="datetime-local">
    </div>

    <div class="actions">
      <button class="btn cancel">取消</button>
      <button class="btn submit">提交</button>
    </div>
  </div>

  <script>
    // 任务状态点击切换
    document.querySelectorAll('.status-option').forEach(el => {
      el.addEventListener('click', () => {
        document.querySelectorAll('.status-option').forEach(opt => opt.classList.remove('active'));
        el.classList.add('active');
      });
    });

    // 提交按钮事件
    document.querySelector('.btn.submit').addEventListener('click', () => {
      alert('报工提交成功！');
    });

    // 取消按钮事件
    document.querySelector('.btn.cancel').addEventListener('click', () => {
      window.history.back();
    });
  </script>
</body>
</html>